<template>
  <div
    class="card"
    v-if="cardInfo.img !== undefined && cardInfo.img.length > 0"
    @click="$commonJs.goPage('goodsDetail', cardInfo.id)"
  >
    <img :src="$api.imgUrl + JSON.parse(cardInfo.img)[0]" alt="" />
    <div class="card-title">
      <p class="card-name">{{ cardInfo.name }}</p>
      <p class="card-money">￥{{ cardInfo.price }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    cardInfo: {
      type: Object
    }
  }
};
</script>

<style scoped lang="stylus">
.card{
  width: calc(50% - 9px)
  position relative;
  margin-bottom 18px;
  display inline-block;
}
img{
  width: 100%;
  border-radius 16px;
}
.card-title{
  position absolute;
  bottom 0;
  width 100%;
  border-radius 0 0 16px 16px;
  background-color #040404;
  opacity 0.6;
  padding 9px 0 12px 10px;
  box-sizing border-box;
}
.card-name{
  font-size 20px;
  color #fefefe;
  line-height 30px;
}
.card-money{
  font-size 24px;
  color #ED721B;
  line-height 30px;
}
</style>
